<template>
  <div>
    <div>
      <p>导航:</p>
      <!-- <router-link to="/goods?goodsname=衣服">瞅瞅衣服</router-link> -->
      <button @click="btn1">瞅瞅衣服</button>
      <br />
      <hr />
      <!-- <router-link to="/goods/裤子">瞅瞅裤子</router-link> -->
      <button @click="btn2">瞅瞅裤子</button>
    </div>
    <div>
      <!-- 7 挂到挂载点 设置router-view组件(VueRouter内置的全局组件) 路由切换时  在这里显示对应的组件-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    btn1() {
      this.$router.push({
        path: "/goods",
        query: {
          goodsname: "衣服",
        },
      });
    },
    btn2() {
      this.$router.push({
        name: "theGoods",
        params: {
          gname: "裤子",
        },
      });
    },
  },
};
</script>

<style scoped>
div:last-child {
  border: 1px solid red;
}
/* 精确匹配 路径一个都不能差*/
.router-link-exact-active {
  color: red;
}
.router-link-active {
  color: red;
}
</style>